<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商家中心 - 仪表盘</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto { content-visibility: auto; }
            .card-hover { @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1; }
            .btn-primary { @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-success { @apply bg-success hover:bg-success/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-warning { @apply bg-warning hover:bg-warning/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-danger { @apply bg-danger hover:bg-danger/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200; }
            .btn-outline { @apply border border-gray-300 hover:border-primary text-gray-600 hover:text-primary font-medium py-2 px-4 rounded-lg transition-all duration-200; }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<!-- Vue挂载容器 -->
<div id="app" class="flex flex-col min-h-screen w-full">
    <!-- 顶部导航 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-briefcase text-primary text-2xl mr-2"></i>
                <h1 class="text-xl font-bold text-gray-700">商家管理中心</h1>
            </div>
            <div class="flex items-center gap-4">
                <div class="relative">
                    <button class="flex items-center text-gray-600 hover:text-primary transition-colors">
                        <i class="fa fa-bell-o text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
                    </button>
                </div>
                <div class="flex items-center gap-2">
                    <img src="https://picsum.photos/200/200" alt="商家头像" class="w-8 h-8 rounded-full object-cover">
                    <span class="text-gray-600">shopEasy店</span>
                    <i class="fa fa-angle-down text-gray-400"></i>
                </div>
                <a href="../index.html"><button class="text-gray-600 hover:text-danger transition-colors" @click="util.logout()">
                    <i class="fa fa-sign-out"></i>
                    <span class="ml-1">退出登录</span>
                </button></a>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex-grow flex">
        <!-- 侧边栏导航 -->
        <aside class="w-64 bg-white shadow-sm h-[calc(100vh-64px)] sticky top-16">
            <nav class="py-4">
                <div class="px-4 py-2 text-xs font-medium text-gray-400">核心功能</div>
                <a href="dashboard.html" class="flex items-center px-4 py-3 text-primary bg-primary/5 border-l-4 border-primary">
                    <i class="fa fa-tachometer mr-3"></i>
                    <span>仪表盘</span>
                </a>
                <a href="product-list.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-cubes mr-3"></i>
                    <span>商品管理</span>
                </a>
                <a href="order-list.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-list-alt mr-3"></i>
                    <span>订单管理</span>
                </a>
                <div class="px-4 py-2 mt-4 text-xs font-medium text-gray-400">店铺设置</div>
                <a href="shop-setting.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-cog mr-3"></i>
                    <span>店铺设置</span>
                </a>
                <a href="account-setting.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary transition-colors">
                    <i class="fa fa-user mr-3"></i>
                    <span>账号设置</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-grow p-6">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-700">仪表盘</h2>
                <p class="text-gray-400 mt-1">实时监控店铺核心数据，高效管理业务</p>
            </div>

            <!-- 数据概览卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <!-- 今日订单 -->
                <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-400 text-sm">今日订单数</p>
                            <h3 class="text-2xl font-bold text-gray-700 mt-2">{{ dashboardData.todayOrderCount }}</h3>
                            <p class="text-success text-sm mt-2 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>12.5% 较昨日</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-shopping-cart text-xl"></i>
                        </div>
                    </div>
                </div>
                <!-- 今日销售额 -->
                <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-400 text-sm">今日销售额</p>
                            <h3 class="text-2xl font-bold text-gray-700 mt-2">¥{{ dashboardData.todaySalesAmount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</h3>
                            <p class="text-success text-sm mt-2 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>8.2% 较昨日</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-success/10 flex items-center justify-center text-success">
                            <i class="fa fa-rmb text-xl"></i>
                        </div>
                    </div>
                </div>
                <!-- 待发货订单 -->
                <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-400 text-sm">待发货订单</p>
                            <h3 class="text-2xl font-bold text-gray-700 mt-2">{{ dashboardData.pendingShipCount }}</h3>
                            <p class="text-danger text-sm mt-2 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>5.3% 较昨日</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                            <i class="fa fa-truck text-xl"></i>
                        </div>
                    </div>
                </div>
                <!-- 商品总数 -->
                <div class="bg-white rounded-xl p-6 shadow-sm card-hover">
                    <div class="flex justify-between items-start">
                        <div>
                            <p class="text-gray-400 text-sm">商品总数</p>
                            <h3 class="text-2xl font-bold text-gray-700 mt-2">{{ dashboardData.totalItemCount }}</h3>
                            <p class="text-success text-sm mt-2 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i>
                                <span>3 较上周</span>
                            </p>
                        </div>
                        <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-cube text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 订单状态分布 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                <!-- 订单状态饼图 -->
                <div class="bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-bold text-gray-700">订单状态分布</h3>
                        <div class="text-sm text-gray-400">近7天</div>
                    </div>
                    <div class="h-64 flex items-center justify-center">
                        <canvas id="orderStatusChart"></canvas>
                    </div>
                </div>
                <!-- 销售额趋势 -->
                <div class="bg-white rounded-xl p-6 shadow-sm">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="font-bold text-gray-700">销售额趋势</h3>
                        <div class="text-sm text-gray-400">近30天</div>
                    </div>
                    <div class="h-64 flex items-center justify-center">
                        <canvas id="salesTrendChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 最近订单列表 -->
            <div class="bg-white rounded-xl p-6 shadow-sm">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="font-bold text-gray-700">最近订单</h3>
                    <a href="order-list.html" class="text-primary hover:underline text-sm flex items-center">
                        <span>查看全部</span>
                        <i class="fa fa-angle-right ml-1"></i>
                    </a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                        <tr class="border-b border-gray-200">
                            <th class="py-3 px-4 text-sm font-medium text-gray-500">订单编号</th>
                            <th class="py-3 px-4 text-sm font-medium text-gray-500">下单时间</th>
                            <th class="py-3 px-4 text-sm font-medium text-gray-500">买家</th>
                            <th class="py-3 px-4 text-sm font-medium text-gray-500">金额</th>
                            <th class="py-3 px-4 text-sm font-medium text-gray-500">状态</th>
                            <th class="py-3 px-4 text-sm font-medium text-gray-500">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-4 text-sm text-gray-600">202405201234567</td>
                            <td class="py-4 px-4 text-sm text-gray-500">2024-05-20 14:30:25</td>
                            <td class="py-4 px-4 text-sm text-gray-600">买家123***456</td>
                            <td class="py-4 px-4 text-sm font-medium text-gray-700">¥299.00</td>
                            <td class="py-4 px-4">
                                <span class="px-2 py-1 text-xs rounded-full bg-warning/10 text-warning">待发货</span>
                            </td>
                            <td class="py-4 px-4">
                                <a href="order-detail.html" class="text-primary hover:underline text-sm mr-3">详情</a>
                                <a href="order-ship.html" class="text-success hover:underline text-sm">发货</a>
                            </td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-4 text-sm text-gray-600">202405201234566</td>
                            <td class="py-4 px-4 text-sm text-gray-500">2024-05-20 11:15:42</td>
                            <td class="py-4 px-4 text-sm text-gray-600">买家789***012</td>
                            <td class="py-4 px-4 text-sm font-medium text-gray-700">¥599.00</td>
                            <td class="py-4 px-4">
                                <span class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">已完成</span>
                            </td>
                            <td class="py-4 px-4">
                                <a href="order-detail.html" class="text-primary hover:underline text-sm">详情</a>
                            </td>
                        </tr>
                        <tr class="border-b border-gray-100 hover:bg-gray-50">
                            <td class="py-4 px-4 text-sm text-gray-600">202405201234565</td>
                            <td class="py-4 px-4 text-sm text-gray-500">2024-05-20 09:45:18</td>
                            <td class="py-4 px-4 text-sm text-gray-600">买家345***678</td>
                            <td class="py-4 px-4 text-sm font-medium text-gray-700">¥199.00</td>
                            <td class="py-4 px-4">
                                <span class="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary">已付款</span>
                            </td>
                            <td class="py-4 px-4">
                                <a href="order-detail.html" class="text-primary hover:underline text-sm mr-3">详情</a>
                                <a href="order-ship.html" class="text-success hover:underline text-sm">发货</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-4 text-center text-sm text-gray-500">
        © 2025 ShopEasy 电商平台 - 商家管理系统，保留所有权利。
    </footer>
</div>

<!-- 脚本引入 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/common.js"></script>
<script>
    // 在DOM完全加载后初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 订单状态饼图
        const orderStatusCtx = document.getElementById('orderStatusChart');
        if (orderStatusCtx) {
            new Chart(orderStatusCtx, {
                type: 'doughnut',
                data: {
                    labels: ['已完成', '待发货', '已付款', '已取消', '售后中'],
                    datasets: [{
                        data: [45, 25, 18, 8, 4],
                        backgroundColor: [
                            '#00B42A', // 成功绿
                            '#FF7D00', // 警告橙
                            '#165DFF', // 主蓝
                            '#F53F3F', // 危险红
                            '#86909C'  // 灰色
                        ],
                        borderWidth: 0,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                font: { size: 12 }
                            }
                        }
                    },
                    cutout: '65%'
                }
            });
        }

        // 销售额趋势图
        const salesTrendCtx = document.getElementById('salesTrendChart');
        if (salesTrendCtx) {
            new Chart(salesTrendCtx, {
                type: 'line',
                data: {
                    labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
                    datasets: [{
                        label: '销售额（元）',
                        data: [12500, 15800, 13200, 18600, 16500, 19800, 18652],
                        borderColor: '#165DFF',
                        backgroundColor: 'rgba(22, 93, 255, 0.1)',
                        fill: true,
                        tension: 0.4,
                        borderWidth: 2,
                        pointBackgroundColor: '#fff',
                        pointBorderColor: '#165DFF',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    },
                    scales: {
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 12 } }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { color: '#F2F3F5' },
                            ticks: {
                                font: { size: 12 },
                                callback: function(value) { return '¥' + value.toLocaleString() }
                            }
                        }
                    }
                }
            });
        }
    });

    // 初始化Vue实例
    new Vue({
        el: "#app",
        data: {
            util: util,
            dashboardData: {
                todayOrderCount: 0,    // 今日订单数
                todaySalesAmount: 0,   // 今日销售额
                pendingShipCount: 0,   // 待发货订单数
                totalItemCount: 0      // 商品总数
            },
            isLoading: true  // 加载状态标记
        },
        mounted() {
            this.fetchDashboardData();  // 页面加载后请求数据
        },
        methods: {
            // 合并请求：先获取订单相关数据，再获取商品总数
            fetchDashboardData() {
                this.isLoading = true;  // 开始加载

                // 1. 先请求订单相关的三个数据（合并为一个接口 /orders/dashboard）
                axios.get('/orders/dashboard')
                    .then(orderRes => {
                        // 订单接口返回的数据结构：{ todayOrderCount, todaySalesAmount, pendingShipCount }
                        this.dashboardData.todayOrderCount = orderRes.data.todayOrderCount;
                        this.dashboardData.todaySalesAmount = orderRes.data.todaySalesAmount;
                        this.dashboardData.pendingShipCount = orderRes.data.pendingShipCount;

                        // 2. 再请求商品总数（/items 前缀）
                        return axios.get('/items/total-count');
                    })
                    .then(itemRes => {
                        // 商品总数接口返回纯数字
                        this.dashboardData.totalItemCount = itemRes.data;
                        this.isLoading = false;  // 所有数据加载完成
                    })
                    .catch(error => {
                        // 异常处理
                        console.error('数据加载失败：', error);
                        alert('数据加载失败，请刷新重试');
                        this.isLoading = false;
                    });
            }
        }
    });
</script>
</body>
</html>
